<!-- 工序管理页面 -->

<script setup>
import { Delete, Edit, RefreshLeft } from '@element-plus/icons-vue';
import { provide, ref, inject, reactive } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

//引入axios
const axios = inject('axios')

//数据
const testdata = reactive({
  "working": []
})

//发送请求时的附带数据
const Data = reactive({
  "conditions": { "process_name": "" }
})

//获取所有数据
function selectWorking1() {
  axios({
    method: 'post',
    url: '/api/working/selectWorking1',
    // data: Data
  }).then((response) => {
    if (response.data.success) {
      if (response.data.map.working != null) {
        testdata.working = response.data.map.working
        console.log("result:")
        console.log(response.data.map)
        console.log("testdata.working:")
        console.log(testdata.working)
        // myData.pageParams = response.data.map.pageParams
      } else {
        ElMessageBox.alert("无工序记录！", '结果')
      }
    } else {
      ElMessageBox.alert(response.data.msg, '结果')
    }
  }).catch((error) => {
    ElMessageBox.alert("系统错误！", '结果')
  })
}
selectWorking1()

//按条件获取数据
function selectByName() {
  console.log("Data:")
  console.log(Data)
  axios({
    method: 'post',
    url: '/api/working/selectByName?process_name=' + Data.conditions.process_name,
  }).then((response) => {
    if (response.data.success) {
      if (response.data.map.working != null) {
        testdata.working = response.data.map.working
        console.log("result:")
        console.log(response.data.map)
        console.log("testdata.working:")
        console.log(testdata.working)
        // myData.pageParams = response.data.map.pageParams
      } else {
        ElMessageBox.alert("无工序记录！", '结果')
      }
    } else {
      ElMessageBox.alert(response.data.msg, '结果')
    }
  }).catch((error) => {
    ElMessageBox.alert("系统错误！", '结果')
  })
}

//表单序号自增
const indexMethod = (index) => {
  return index + 1
}

const form = [{
  process_name: '',
  photo: ''
}]

// 编辑工序子页面控制
let dialogFormVisibles = ref(false)
let adddialogFormVisible = ref(false)
const formLabelWidth = '250px'
const editProcess = () => {
  dialogFormVisibles.value = true
}
const addprocess = () => {
  adddialogFormVisible.value = true
}
// 编辑工序子页面中巡检检查项跳转到检查项管理页面
function toCheckItems() {
  router.push('/home/checkitems')
}
//为后代组件提供当前组件的表单数据
provide("currentBin", testdata.working.process_name)
</script>
<template>
  <el-row style="background-color: white;margin: 40px 10px 0px;border:mintcream;">
    <el-col :span="24">
      <!-- 表单功能栏 -->
      <el-row class="row1">
        <el-col :span="21">
          <h3>工序列表</h3>
        </el-col>
        <el-col :span="3">
          <el-button type="success" @click="addprocess">
            添加新工序
          </el-button>
        </el-col>
      </el-row>
      <el-row class="row1">
        <el-col :span="3">
          <el-button :icon="RefreshLeft" size="middle">
            刷新
          </el-button>
        </el-col>
        <el-col :span="21" class="col2">
          <el-row>
            <el-col :span="22">
              <el-input style="margin:0px 0px 0px -6px ;" v-model="Data.conditions.process_name" class="input"
                placeholder="请输入工序名称" clearable />
            </el-col>
            <el-col :span="2">
              <el-button type="success" style="margin:0px 0px 0px -6px ;" @click="selectByName">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表单主体 -->
      <el-row class="row3" style="width: 100%;margin: 0px auto;">
        <el-col :span="24">
          <!-- data、click需要更改 -->
          <el-table :data="testdata.working" stripe border style="width:100%">
            <el-table-column label="序号" align="center" type="index" :index="indexMethod" width="300px" />
            <el-table-column label="工序照片" align="center" prop="photo" width="300px">
              <!-- <template v-slot="scope">
                <el-image class="imags" :src="scope.row.imgs" :preview-src-list="[scope.row.imgs]">
                  <div class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </template> -->
            </el-table-column>
            <el-table-column label="工序名称" align="center" prop="processName" width="300px" />
            <el-table-column label="编辑" align="center">
              <template #default="scope">
                <el-button type="primary" @click="editProcess" size="small" :icon="Edit">编辑工序</el-button>
                <el-button type="primary" @click="" size="small" :icon="Delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <!-- 编辑工序子页面 -->
  <el-dialog v-model="dialogFormVisibles" title="编辑工序">
    <el-row style="margin-bottom:10px">
      <el-col :span="12" align="right" style="margin-top:6px">
        管理工步
      </el-col>
      <el-col :span="10" align="center">
        <el-button size="middle">
          工步
        </el-button>
      </el-col>
    </el-row>

    <el-row style="margin-bottom:10px">
      <el-col :span="12" align="right" style="margin-top:6px">
        管理首件检查项
      </el-col>
      <el-col :span="10" align="center" size="middle">
        <el-button>
          首件检查项
        </el-button>
      </el-col>
    </el-row>

    <el-row style="margin-bottom:10px">
      <el-col :span="12" align="right" style="margin-top:6px">
        管理巡检检查项
      </el-col>
      <el-col :span="10" align="center" size="middle">
        <el-button @click="toCheckItems">
          巡检检查项
        </el-button>
      </el-col>
    </el-row>

    <!-- <el-row style="margin-bottom:10px">
      <el-col :span="12" align="right" style="margin-top:6px">
        允许进行标签打印
      </el-col>
      <el-col :span="10" align="center" size="middle">
        <template>
          <el-checkbox v-model="" label="是" size="middle" />
          <el-checkbox v-model="" label="否" size="middle" />
        </template>
      </el-col>
    </el-row> -->
  </el-dialog>
  <!-- 添加工序子页面 -->
  <el-dialog v-model="adddialogFormVisible" title="工序信息">
    <el-form :model="form">
      <el-form-item label="工序名称" :label-width="formLabelWidth">
        <el-input v-model="form.process_name" autocomplete="off" placeholder="请正确输入名称..." />
        <span>
          <h6 style="margin:0">格式示例:可由中文、字母、数字组合,如工序a1、工序a、abc,(长度小于30个字符)</h6>
        </span>
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <el-input v-model="form.photo" autocomplete="off" />
      </el-form-item>
      <el-form-item label="允许进行标签打印" :label-width="formLabelWidth">
        <li>
          <input type="radio" name="n1" value="true">是
          <input type="radio" name="n1" value="false">否
        </li>
      </el-form-item>
      <el-form-item label="首件输出限制" :label-width="formLabelWidth">
        <li>
          <input type="radio" name="n2" value="true">是
          <input type="radio" name="n2" value="false">否
        </li>
      </el-form-item>
      <el-form-item label="输出进行打印" :label-width="formLabelWidth">
        <li>
          <input type="radio" name="n3" value="true">是
          <input type="radio" name="n3" value="false">否
        </li>
      </el-form-item>
      <el-form-item label="工位输出对原料进行检查" :label-width="formLabelWidth">
        <li>
          <input type="radio" name="n4" value="true">是
          <input type="radio" name="n4" value="false">否
        </li>
      </el-form-item>
      <el-form-item label="分料自动下发任务" :label-width="formLabelWidth">
        <li>
          <input type="radio" name="n5" value="true">是
          <input type="radio" name="n5" value="false">否
        </li>
      </el-form-item>
      <el-form-item label="没有物料和前置工序自动下发任务" :label-width="formLabelWidth">
        <li>
          <input type="radio" name="n6" value="true">是
          <input type="radio" name="n6" value="false">否
        </li>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="adddialogFormVisible = false">提交</el-button>
        <el-button @click="adddialogFormVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style scoped>
.row1 {
  margin-left: 20px;
  margin-bottom: 10px;
  align-items: center;
}

.imags {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.el-form-item .el-input {
  width: 400px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.el-form-item .el-select {
  width: 300px;
}

li {
  list-style: none;
}
</style>